<template>
  <div>
    <Modal
      v-model="isShowModal"
      title="修改收件人信息"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
      <Form
        :model="orderInfo"
        :label-width="120"
        ref="formRef"
        :rules="ruleInline"
      >
        <Row :gutter="16">
          <Col span="20">
            <Input
              type="textarea"
              v-model="addressText"
              placeholder="输入地址识别"
            ></Input>
          </Col>
          <Col :span="4">
            <Button
              style="margin-right: 10px;"
              @click="translateHandle(1)"
              type="primary"
            >
              识别
            </Button>
          </Col>
        </Row>

        <Row :gutter="16">
          <Col span="12">
            <FormItem label="收件联系人" prop="backMan">
              <Input
                v-model.trim="orderInfo.backMan"
                placeholder="请输入收件联系人"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="收件联系电话" prop="backPhone">
              <Input
                v-model.trim="orderInfo.backPhone"
                placeholder="请输入收件联系电话"
              ></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="收件地区" prop="backCounty">
              <Row>
                <Col span="8">
                  <Select
                    v-model="orderInfo.backProvince"
                    style=""
                    placeholder="选择省"
                  >
                    <Option
                      v-for="item in regionDataList"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <Col span="8">
                  <Select
                    v-model="orderInfo.backCity"
                    style=""
                    placeholder="选择市"
                  >
                    <Option
                      v-for="item in regionDataList4"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <Col span="8">
                  <Select
                    v-model="orderInfo.backCounty"
                    style=""
                    placeholder="选择区"
                  >
                    <Option
                      v-for="item in regionDataList5"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="收件地址" prop="backAddress">
              <Input
                v-model.trim="orderInfo.backAddress"
                placeholder="请输入收件地址"
              ></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>

      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button @click="confirm" type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { trim, replace, get } from 'lodash';

  export default {
    name: 'order-ope',
    data() {
      return {
        isShowModal: false,
        addressText: '',
        orderInfo: {
          backAddress: '',
          backCity: '',
          backCounty: '',
          backMan: '',
          backPhone: '',
          backProvince: '',
          orderCode: ''
        },
        ruleInline: {
          backMan: [
            {
              required: true,
              message: '选择收件人',
              trigger: 'blur'
            }
          ],
          backPhone: [
            {
              required: true,
              message: '选择收件联系方式',
              trigger: 'blur'
            }
          ],
          backAddress: [
            {
              required: true,
              message: '选择收件地址',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    computed: {

      regionDataList4() {
        if (this.orderInfo.backProvince) {
          const backProvinceObj = this.regionDataList.find(
            item => item.label == this.orderInfo.backProvince
          );
          return backProvinceObj?.children || [];
        } else {
          return [];
        }
      },
      regionDataList5() {
        if (this.regionDataList4.length == 1) {
          this.orderInfo.backCity = this.regionDataList4[0].label;
        }
        if (this.orderInfo.backCity) {
          const backCityObj = this.regionDataList4.find(
            item => item.label == this.orderInfo.backCity
          );
          return backCityObj?.children || [];
        }
      }
    },
    methods: {
      // 显示模态框
      show(row) {
        this.isShowModal = true;
        this.getOrderMallById(row);
      },
      setbackData(data) {
        this.orderInfo.backProvince = data.province;
        this.orderInfo.backCity = data.city;
        this.orderInfo.backCounty = data.county;
        this.orderInfo.backMan = data.person;
        this.orderInfo.backPhone = data.phonenum;
        this.orderInfo.backAddress = `${data.town}${data.detail}`;
        this.orderInfo = { ...this.orderInfo };
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .get('/factory/order/getOrderMallById', {
            params: { id: row.mallOrderId }
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            this.orderInfo = res.data.orderMall;
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      },
      confirm() {
        this.axios
          .post('/orderMall/updateBackInfo', {
            ...this.orderInfo,
            orderCode: this.orderInfo.mallOrderCode
          })
          .then(res => {
            console.log(res);
            this.hide();
          });
      },
      translateHandle() {
        if (!this.addressText) {
          return;
        }
        this.axios
          .post(`/common/autoAddress`, {
            addressText: trim(replace(this.addressText, /\s+/g, ''))
          })
          .then(res => {
            const data = res.data;
            this.setbackData(data);
          });
      }
    }
  };
</script>

<style scoped lang="less">
  /deep/.ivu-row {
    margin-bottom: 5px;
  }
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
